<!-- 领养驿站 -->
<template>
  <div class="adoptBox">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="送养信息" name="placeOutAdoption">
        <div class="adoptForm">
          <el-form
            :label-position="labelPosition"
            label-width="130px"
            :model="adoptRuleForm"
            status-icon
            :rules="rules"
            ref="adoptRuleForm"
          >
            <el-form-item label="宠物类别" prop="petType">
              <el-input v-model="adoptRuleForm.petType"></el-input>
            </el-form-item>
            <el-form-item label="宠物体重" prop="petWeight">
              <el-input v-model="adoptRuleForm.petWeight"></el-input>
            </el-form-item>
            <el-form-item label="宠物年龄" prop="petAge">
              <el-input v-model="adoptRuleForm.petAge"></el-input>
            </el-form-item>
            <el-form-item label="送养人姓名" prop="petAdopter">
              <el-input v-model="adoptRuleForm.petAdopter"></el-input>
            </el-form-item>
            <el-form-item label="送养人联系方式" prop="petPhone">
              <el-input v-model="adoptRuleForm.petPhone"></el-input>
            </el-form-item>
            <el-form-item label="送养人地址" prop="adopterAddress">
              <el-input v-model="adoptRuleForm.adopterAddress"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('adoptRuleForm')"
                >提交</el-button
              >
              <el-button @click="resetForm('adoptRuleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="领养信息" name="adopt">
        <div>
          <el-table :data="tableData" border stripe style="width: 100%" height="600" align="center" header-align="center">
            <el-table-column prop="petType" label="宠物类别"> </el-table-column>
            <el-table-column prop="petWeight" label="宠物体重（kg）">
            </el-table-column>
            <el-table-column prop="petAge" label="宠物年龄（年）">
            </el-table-column>
            <el-table-column prop="petAdopter" label="送养人姓名">
            </el-table-column>
            <el-table-column prop="petPhone" label="送养人联系方式">
            </el-table-column>
            <el-table-column prop="adopterAddress" label="送养人地址">
            </el-table-column>
            <el-table-column prop="creationTime" label="日期"> </el-table-column>
            <el-table-column label="操作" header-align="center" align="center">
              <template slot-scope="scope">
                <el-button type="danger" size="small" @click="handleDelCell(scope.row)" v-if="userInfo.power === 1">删除</el-button>
                <el-button type="danger" size="small"  v-else>暂无权限</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="adoptPage"
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { saveAdoption, queryAdoptList ,delAdoptList} from '@/api/adopt'
import {mapGetters} from 'vuex';

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      activeName: 'placeOutAdoption',
      labelPosition: 'right',
      adoptRuleForm: {
        petType: '',
        petWeight: '',
        petAge: '',
        petAdopter: '',
        petPhone: '',
        adopterAddress: ''
      },
      rules: {
        petType: [{ required: true, message: '请输入宠物类别', trigger: 'blur' }],
        petWeight: [
          { required: true, message: '请输入宠物体重', trigger: 'blur' }
        ],
        petAge: [{ required: true, message: '请输入宠物年龄', trigger: 'blur' }],
        petAdopter: [
          { required: true, message: '请输入送养人姓名', trigger: 'blur' }
        ],
        petPhone: [
          { required: true, message: '请输入送养人联系方式', trigger: 'blur' }
        ],
        adopterAddress: [
          { required: true, message: '请输入送养人姓名住址', trigger: 'blur' }
        ]
      },
      tableData: [],

      pageIndex: 1,
      pageSize: 10,
      totalPage: 0
    }
  },
  // 监听属性 类似于data概念
  computed: {
    ...mapGetters(['userInfo'])
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 切换他tab
    handleClick (tab, event) {
      if (tab.name === 'adopt') {
        this.getDataList()
      }
    },
    // 提交表单
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          saveAdoption(this.adoptRuleForm).then((res) => {
            if (res.code === 10000) {
              console.log(res);
              this.$message({
                message: res.message,
                type: 'success'
              })
            } else {
              this.$message.error('提交失败')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 重置表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 获取领养表格
    getDataList () {
      queryAdoptList().then((res) => {
        if (res.code === 10000) {
          this.tableData = res.datas
          this.totalPage = res.total
        }
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    handleDelCell(row){
      console.log(row);
      delAdoptList(row).then((res)=>{
        this.getDataList();
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.adoptBox {
  width: 80%;
  margin: 0 auto;
}
.adoptForm {
  width: 500px;
}
.adoptPage {
  margin-top: 20px;
  margin-right: 20px;
  float: right;
}
</style>
